<template>
    <el-dialog :title="title" :visible="visible" append-to-body :destroy-on-close="true" @close="close">
        <el-form size="small" :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm">
            <el-form-item label="身份证号" prop="card_no">
                <el-input v-model="ruleForm.card_no" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contact">
                <el-input v-model="ruleForm.contact" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入电话"></el-input>
            </el-form-item>
            <el-form-item label="车牌号" prop="car_no">
                <el-input v-model="ruleForm.car_no" placeholder="示例值：陕A51Qz1"></el-input>
            </el-form-item>
            <el-form-item label="车辆容积" prop="volume">
                <el-input v-model="ruleForm.volume" placeholder="示例值：三厢4.2"></el-input>
            </el-form-item>
            <el-form-item label="载重" prop="car_capacity">
                <el-input v-model="ruleForm.car_capacity" placeholder="请输入车辆载重">
                    <template slot="append">kg</template>
                </el-input>
            </el-form-item>
            <el-form-item label="登录账号" prop="account">
                <el-input v-model="ruleForm.account" placeholder="请输入司机登录账号" :disabled="ruleForm.driver_id ? true:false"></el-input>
            </el-form-item>
            <template v-if="!ruleForm.driver_id">
                <el-form-item label="登录密码" prop="password">
                    <el-input v-model="ruleForm.password" placeholder="请输入登录密码"></el-input>
                </el-form-item>
                <el-form-item label="启用" prop="status">
                    <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </template>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="onSubmit('ruleForm')" :disabled="isDisabled" :loading="isLoading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { addDriver, editDriver } from "@/api/driver.js";
export default {
    name: "addDriver",
    props: {},
    data() {
        return {
            visible: false,
            isDisabled: false,
            isLoading: false,
            title:'',
            ruleForm: {
                card_no: '',
                contact: '',
                phone: '',
                car_no:'',
                volume: '',
                car_capacity: '',
                account: '',
                password: '',
                status: 1,
            },
            options: [],
            rules: {
                card_no: [
                    {
                        required: true,
                        message: "请输入身份证号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                        message: "身份证号格式有误",
                        trigger: "blur",
                    },
                ],
                contact: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入电话",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1[3456789]\d{9}$/,
                        message: "请输入正确的手机号",
                        trigger: "blur",
                    },
                ],
                car_no: [
                    {
                        required: true,
                        message: "请输入车牌号",
                        trigger: "blur",
                    },
                ],
                volume: [
                    {
                        required: true,
                        message: "请输入车辆容积",
                        trigger: "blur",
                    },
                ],
                car_capacity: [
                    {
                        required: true,
                        message: "请输入车辆载重",
                        trigger: "blur",
                    },
                ],
                account: [
                    {
                        required: true,
                        message: "请输入司机登录账号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1[3456789]\d{9}$/,
                        message: "请输入正确的手机号",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入登录密码",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {

    },
    methods: {
        add() {
            this.visible = true;
        },
        clear() {
            this.ruleForm = {
                driver_id:'',
                card_no: '',
                contact: '',
                phone: '',
                volume: '',
                car_capacity: '',
                account: '',
                password: '',
                status: 1,
            };
        },
        onSubmit(formName) {
            console.log("this.ruleForm", this.ruleForm);
            this.isDisabled = true;
            this.isLoading = true;
            let submitApi;
            if (this.ruleForm.driver_id) {
                submitApi = editDriver;
                delete this.ruleForm.password;
                delete this.ruleForm.status;
            } else {
                submitApi = addDriver;
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    submitApi(this.ruleForm).then((res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.close();
                            this.$emit("reload");
                            this.isDisabled = false;
                            this.isLoading = false;
                        } else {
                            this.isDisabled = false;
                            this.isLoading = false;
                        }
                    });
                } else {
                    this.isDisabled = false;
                    this.isLoading = false;
                    return false;
                }
            });
        },
        close() {
            this.visible = false;
            setTimeout(()=>{
                this.clear()
            },300)
        },
    },
};
</script>

<style>
</style>